<template>
    <div>
        <h1 class="top">详情页面</h1>
        <div class="safe">
            <img src="" alt="">
            <div class="con" >
                <h1>{{list.name}}</h1>
                <p>所需积分：{{list.price}}</p>
                <p>商品介绍：{{list.info}}</p>
                <p>剩余数量：{{list.stock_number}}</p>
                <p>数量：<button @click="reduce">-</button><button>{{num}}</button><button @click="add">+</button></p>
                <button @click="convert" style="border-radius:2rem">兑换</button>
            </div>
        </div>
        <van-dialog v-model="show" title="兑换门店列表" 
        show-cancel-button confirmButtonText="兑换"
        width="600px" @confirm="confirm"
        >
            <div class="mendianlist">
                <van-radio-group  v-model="radio" direction="horizontal">
                    <van-radio @click="tap(item.token)" class="username" v-for="(item,index) in storeList" :key="index" :name="item.token">{{item.realname}}</van-radio>
                </van-radio-group>
            </div>
            
        </van-dialog>
    </div>
</template>
<script>
import { Dialog} from 'vant';
import api from "../../libs/js/integralAjax"
import axios from 'axios'
export default {
    components: {
        [Dialog.Component.name]: Dialog.Component
    },
    data(){
        return{
            id:'',
            list:[],
            num:1,
            show:false,
            storeList:[],
            radio:'1',
            usertoken:""
        }
    },
    created(){
        this.id = this.$route.params.id
        console.log(this.id)
        this.getDetail()
    },
    methods:{
        getDetail(){
            var url='/api/admin/integral/goods/GetOne'
            var param = {
                id:this.$route.params.id
            }
              this.$util.postRequestInterface(url, param, (res) => {
                  this.list = res.data
              })

        },

        //兑换商品
        convert:async function(){
            this.show=true
            var url='/api/admin/user/getMenDianOfZhuGuan'
            var param = {
                token:this.$store.state.options.user.token
            }
            this.$util.postRequestInterface(url, param, (res) => {
                console.log(res)
                this.storeList=res.data.data
            })
        },
        //选择完门店点击兑换按钮
        confirm(){
            this.createOrder()
            this.radio=""
        },
        //创建订单
        createOrder:async function(){
            var url = '/api/admin/integral/order/createOrder'
            var param = {
                userToken : this.usertoken,
                token : this.$store.state.options.user.token,
                goods_id:this.id,
                number:this.num,
            }
            this.$util.postRequestInterface(url, param, (res) => {
                if(res){
                    alert('创建成功')
                    console.log('创建成功')
                    this.$router.push({
                        name:'GeneralAwaitOrderList',
                        params:{
                            token : this.$store.state.options.user.token,
                        }
                    })
                }
            })
        },
        //控制商品数量
        add(){
            this.num++
        },
        reduce(){
            if(this.num>1){
                this.num--
            }else{
                this.$alert('不能再减少了', '商品数量', {
                    confirmButtonText: '确定',
                });
            }
        },
        //获取兑换用户的token
        tap(e){
            console.log(e)
            this.usertoken = e
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    margin: 0;
}
    .top{
        text-align: center;
    }
    .safe{
        width: 100rem;
        height: 22rem;
        margin: 0 auto;
        margin-top:5rem;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        padding: 3rem 0;
        border-radius: 5px;
    }
    img{
        float: left;
        width: 20rem;
        height: 20rem;
        margin-left: 5rem;
    }
    .con{
        float: left;
        margin-left: 2rem;
        p{
            color: rgb(0,205,0) ;
            padding: 1rem 0;
            button{
                width: 2rem;
                height: 2rem;
            }
        }
        button{
            border: none;
            background:rgb(0,205,0) ;
            color:white;
            border-radius: 0.2rem;
            margin: 0.5rem 0;
            width: 8rem;
            height: 4rem;
        }
    }
    .mendianlist{
        width: 500px;
        margin: 0 auto;
        height: 400px;
        overflow: hidden;
    }
    .username{
        float: left;
        width: 250px;
        margin: 1rem 0;
    }
</style>